<div class="frame">
    <app-item-frame-header [item]="item" [queryItem]="queryItem"
        [queryable]="!item.nameId && (item.rarity === 'magic' || item.rarity === 'rare')" [language]="language">
    </app-item-frame-header>

    <div class="detail">
        <!-- properties -->
        <ng-container *ngIf="item.properties">
            <app-item-frame-properties [item]="item" [queryItem]="queryItem" [language]="language"
                [properties]="properties">
            </app-item-frame-properties>
            <ng-content select="properties"></ng-content>
            <app-item-frame-separator [item]="item" *ngIf="req || sockets || stats || state || influences || separator">
            </app-item-frame-separator>
        </ng-container>

        <!-- requirements -->
        <ng-container *ngIf="req">
            <app-item-frame-level-requirements [item]="item" [queryItem]="queryItem" [language]="language">
            </app-item-frame-level-requirements>
            <app-item-frame-separator [item]="item" *ngIf="sockets || stats || state || influences || separator">
            </app-item-frame-separator>
        </ng-container>

        <!-- sockets -->
        <ng-container *ngIf="sockets">
            <app-item-frame-sockets [item]="item" [queryItem]="queryItem"></app-item-frame-sockets>
            <app-item-frame-separator [item]="item" *ngIf="stats || state || influences || separator">
            </app-item-frame-separator>
        </ng-container>

        <!-- stats -->
        <ng-container *ngIf="stats">
            <app-item-frame-stats [item]="item" [queryItem]="queryItem" [language]="language"
                [modifierMinRange]="modifierMinRange" [modifierMaxRange]="modifierMaxRange"></app-item-frame-stats>
            <app-item-frame-separator [item]="item" *ngIf="state || influences || separator">
            </app-item-frame-separator>
        </ng-container>

        <!-- veiled / corrupted -->
        <ng-container *ngIf="state">
            <app-item-frame-state [item]="item" [queryItem]="queryItem" [language]="language"></app-item-frame-state>
            <app-item-frame-separator [item]="item" *ngIf="influences || separator">
            </app-item-frame-separator>
        </ng-container>

        <!-- influences -->
        <ng-container *ngIf="influences">
            <app-item-frame-influences [item]="item" [queryItem]="queryItem" [language]="language">
            </app-item-frame-influences>
            <app-item-frame-separator [item]="item" *ngIf="separator">
            </app-item-frame-separator>
        </ng-container>

        <ng-content></ng-content>
    </div>
</div>